import React, { createContext, useState, useCallback, useContext } from 'react';

// 添加 Context 类型定义
interface WalkthroughContextType {
    triggerWalkthrough: (data?: any) => void;
    isWalkthroughTriggered: boolean;
    walkthroughData: any;
    resetWalkthrough: () => void;
}

// 更新 Context 的默认值，包含所有必需的属性
export const WalkthroughContext = createContext<WalkthroughContextType>({
    triggerWalkthrough: () => {
        console.warn('triggerWalkthrough called outside of WalkthroughProvider');
    },
    isWalkthroughTriggered: false,
    walkthroughData: null,
    resetWalkthrough: () => {
        console.warn('resetWalkthrough called outside of WalkthroughProvider');
    },
});

/**
 * WalkthroughProvider 组件
 * 用于包裹应用，并提供触发漫游引导的功能给所有子组件。
 */
export const WalkthroughProvider = ({ children }: { children: React.ReactNode }) => {
    // 定义一个状态来模拟漫游是否被触发
    // 实际项目中，这里可能会更复杂，例如包含要引导的步骤信息
    const [isWalkthroughTriggered, setIsWalkthroughTriggered] = useState(false);
    const [walkthroughData, setWalkthroughData] = useState(null); // 可以传递额外数据给漫游组件

    /**
     * 触发漫游引导的函数
     * 任何子组件都可以调用此函数来启动漫游。
     * @param {any} data - 可以传递给漫游组件的额外数据，例如要引导的特定ID或步骤。
     */
    const triggerWalkthrough = useCallback((data = null) => {
        setIsWalkthroughTriggered(true);
        setWalkthroughData(data); // 保存触发时传递的数据
        // 在这里，你可以放置实际启动漫游引导库的逻辑
        // 例如：yourWalkthroughLibrary.start(data);
    }, []);

    /**
     * 重置漫游引导状态的函数
     * 通常在漫游引导完成后调用。
     */
    const resetWalkthrough = useCallback(() => {
        setIsWalkthroughTriggered(false);
        setWalkthroughData(null);
    }, []);

    // Context 提供的值
    const contextValue = {
        triggerWalkthrough,
        isWalkthroughTriggered, // 提供状态，让漫游组件可以监听
        walkthroughData, // 提供数据，让漫游组件可以使用
        resetWalkthrough, // 提供重置函数
    };

    return <WalkthroughContext.Provider value={contextValue}>{children}</WalkthroughContext.Provider>;
};

/**
 * 自定义 Hook: useWalkthrough
 * 方便子组件使用 WalkthroughContext。
 */
export const useWalkthrough = () => {
    return useContext(WalkthroughContext);
};
